<html>
    <head>
        <title>访问根实例</title>
    </head>
    <body>
        <script>
            // 1、访问 "根实例"
                                        /*
                                            在每个new Vue 实例的子组件中，其根实例可以通过 $root 实例属性访问到。
                                        */
                                        //  例如，在这个根实例中：
                                                new Vue({
                                                        data:{
                                                            foo:1
                                                        },
                                                        computed:{
                                                            bar:function(){
                                                                /* .... */
                                                            }
                                                        },
                                                        methods:{
                                                            baz:function(){
                                                                /*....*/
                                                            }
                                                        }
                                                });

                                        // 所有的子组件都可以将这个示例作为一个全局 store 来"访问" 或 "使用"：

                                            // 获取根组件(根实例)的数据
                                            this.$root.foo

                                            // 写入根组件(根实例)的数据
                                            this.$root.foo =2

                                            // 访问根组件(根实例)的计算属性
                                            this.$root.bar

                                            // 调用根组件(根实例)的方法
                                            this.$root.baz()

                                         /*
                                              注意：  
                                                   对于 demo 或 非常小型的"有少量组件的应用" 来说这是很方便的。
                                                   不过，这个模式扩展到中大型应用来说就不然了。
                                                   因此，在绝大多数情况下，我们强烈推荐使用 Vuex 来管理应用的状态。
                                         */
        </script>
    </body>
</html>